<template>
  <div class="big-div">
    <div class="headers">
      <img
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534136662314&di=af7ec227db5e118a5626a94ab97026f3&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4bed2e738bd4b31ccda81d7a8bd6277f9f2ff85f.jpg"
        alt
      />
    </div>
    <ul class="ulone">
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
    </ul>
    <div class="div-tow">送礼物加票数</div>
    <div class="div-monye">
      <ul class="ul-list">
        <li
          :class="{'picker':indexs==index}"
          @click="bindPickerChange(index,item)"
          class="li-list"
          v-for="(item,index) in contentList"
          :key="index"
        >
          <p>{{item.name}}</p>
          <img :src="item.url" alt />
          <p>+{{item.num}}票</p>
        </li>
      </ul>
      <ul class="ul-monye">
        <li class="li-monye">
          <p>
            <span>￥{{sun}}</span>
            <span>+{{average}}票</span>
          </p>
          <p>
            <span @click="reduce">-</span>
            <input class="input" :value="number" type="number" v-model="number" />
            <span @click="add">+</span>
          </p>
        </li>
      </ul>
    </div>
    <button @click="pay" type="primary" form-type="submit" size="default">立即送出</button>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      number: 1,
      num: 1,
      max: 20,
      indexs: 0,
      contentList: [
        {
          url: "/static/images/11.png",
          name: "棒棒糖",
          price: 1,
          num: 20
        },
        {
          url: "/static/images/22.jfif",
          name: "花花",
          price: 18,
          num: 65
        },
        {
          url: "/static/images/33.jpg",
          name: "么么哒",
          price: 25,
          num: 99
        },
        {
          url: "/static/images/44.jfif",
          name: "666",
          price: 55,
          num: 240
        },
        {
          url: "/static/images/55.jfif",
          name: "告白气球",
          price: 98,
          num: 550
        },
        {
          url: "/static/images/66.jfif",
          name: "小心心",
          price: 168,
          num: 1000
        },
        {
          url: "/static/images/77.jpg",
          name: "神灯",
          price: 258,
          num: 2188
        },
        {
          url: "/static/images/88.jpg",
          name: "皇冠",
          price: 328,
          num: 2888
        },
        {
          url: "/static/images/99.jpg",
          name: "宝箱",
          price: 648,
          num: 6888
        }
      ]
    };
  },
  computed: {
    sun: function() {
      return this.num * this.number;
    },
    average: function() {
      return this.max * this.number;
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    bindPickerChange(index, item) {
      this.indexs = index;
      this.num = item.price;
      this.max = item.num;
    },
    reduce() {
      console.log(1);
      this.number += -1;
      if (this.number <= 1) {
        this.number = 1;
      }
    },
    add() {
      this.number += 1;
      if (this.number >= 99) {
        this.number = 99;
      }
    },
    pay() {
      wx.requestPayment({
        timeStamp: "",
        nonceStr: "",
        package: "",
        signType: "MD5",
        paySign: "",
        success(res) {},
        fail(res) {}
      });
    }
  },
  components: {}
};
</script>

<style scoped>
.big-div {
  background-color: rgb(224, 224, 224);
}
.headers {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.headers img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.ulone {
  background-color: #31c9b1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px 10px 0 10px;
  /* border-radius: 15px; */
}
.ulone li {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: wheat;
  font-size: 14px;
  font-weight: 600;
}
.div-tow {
  margin: 10px auto;
  width: 95%;
  line-height: 40px;
  background-color: white;
  color: thistle;
}
.div-monye {
  width: 95%;
  background-color: #f0f0f0;
  margin: 30px auto;
}
.ul-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 5px;
}
.li-list {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  margin: 5px;
  color: rgb(156, 156, 156);
  font-size: 14px;
}
.picker {
  border: 1px solid rgb(88, 88, 88);
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(224, 224, 224);
  margin: 5px;
  color: rgb(156, 156, 156);
  font-size: 14px;
}
.li-list img {
  width: 40px;
  height: 40px;
}
.li-list p {
  margin: 5px 0;
}
.li-list p:nth-child(3) {
  width: 100%;
  background-color: #b3e757;
  height: 20px;
  text-align: center;
}
.li-monye {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
.li-monye p:nth-child(1) {
  line-height: 20px;
}
.li-monye p:nth-child(1) span {
  padding: 0 10px;
}
.li-monye p:nth-child(2) {
  display: flex;
  justify-content: space-between;
}
.li-monye p:nth-child(2) span {
  width: 20px;
  height: 20px;
  border: 1px solid rgb(104, 104, 104);
  line-height: 20px;
}
.input {
  border: 1px 0 solid rgb(104, 104, 104);
  width: 40px;
  text-align: center;
}
.ul-monye {
  width: 95%;
  margin: 0 auto;
  /* line-height: 40px; */
  color: rgb(116, 116, 116);

  padding-bottom: 20px;
}
button {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
